<template>
    <div>
        <div class="img-wrapper">
            <el-card class="content-card" v-for="(item, index) in data" :key="index">
                <img :src="item.imgSrc" alt="">
                <div style="text-align: center">{{ item.goodName }}</div>
                <div style="text-align: center">{{ item.content }}</div>
                <div style="text-align: center">￥{{ item.price }}</div>
                <el-button @click="addToCart(item)" 
                            class="button" 
                            type="primary" 
                            round>+购物车</el-button>
                <router-link :to="`/home/diy/${index}`"><el-button class="button" type="primary" round>去diy</el-button></router-link>
            </el-card>
        </div>
    </div>
</template>

<script>
import Service from '@/service/request'

export default {
  data() {
    return {
        routerPath: ['diy', 'cart', 'order'],
        data: []
    }
  },
  methods: {
    addToCart(data) {
        this.$message.success('加入购物车成功！')
        Service.addToCart(data.id, this.$store.state.userId)
    }
  },
  async created () {
    await this.$store.dispatch('getData')
    this.data = this.$store.state.data
    localStorage.setItem('data', this.data)
  }
}
</script>

<style>
.img-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}

.content-card {
    margin-top: 80px;
}

.content-card img {
    display: block;
    width: 250px;
    height: auto;
    margin-bottom: 30px;
}

.button {
    width: 100%;
    margin: 15px 0 0 0 !important;
}
</style>